<template>
	<view class="container">
		<view class="item-view">
			<children-base-top-view
				v-if="hasData"
				:name="reportData.childrenName"
				:month="reportData.month"
				:gender="reportData.gender"
				:height="reportData.height"
				:weight="reportData.weight"
				:header="reportData.header"
				:imgUrl="reportData.children ? reportData.children.imgUrl:''"
				:more="false"
			/>
		</view>
		
		<view class="item-view">
		  <view v-if="hasData" class="conclusion">{{reportData.normalConclusion}}</view>
		</view>
		
		<assess-bmi-view v-if="hasData" 
			:bmi="reportData.bmi" 
			:name="reportData.childrenName"
			:gender="reportData.gender"
			:height="reportData.height"
			:weight="reportData.weight"
			:birthday="formatTimestamp(reportData.birthday, 'yyyy-mm-dd')"/>
		
		<assess-scores-chart v-if="hasData"
			:dimension-scores="rels"/>
			
		<view class="item-view item-view-grey">
			<assess-high-level v-if="hasData"
							   :paid="paid"
							   :high-level-info="rels"/>
		</view>
	</view>
</template>

<script>
	import AssessScoresView from '../components/assess-scores-view.vue'
	import AssessBmiView from '../components/assess-bmi-view.vue'
	
	import ChildrenBaseTopView from '@/components/children-base-top-view.vue'
	import AssessHighLevel from './components/assess-high-level.vue'
	import AssessScoresChart from './components/assess-scores-chart.vue'
	import { evlPsycalDetail, evaluateDetail } from '@/api/evaluate.js'
	import appMixin from '@/mixins/app.js'
	export default {
		mixins: [appMixin],
		components:{
			ChildrenBaseTopView,
			AssessScoresView,
			AssessHighLevel,
			AssessBmiView,
			AssessScoresChart
		},
		data() {
			return {
				hasData: false,
				reportData: null,
				rels: [],
				paid: true
			}
		},
		onLoad(options) {
			this.evaluateRecordId = options.evaluateRecordId;
			this.getEvlPsycalDetail();
		},
		methods: {
			getEvlPsycalDetail() {
				if (this.appType === 'app-tch' || this.appType === 'mp-tch') {
					evaluateDetail(this.evaluateRecordId).then(res => {
						console.log(res);
						this.reportData = res.data;
						this.rels = this.reportData.rels.slice(2, 8);
						this.hasData = true
					})
				} else if (this.appType === 'app-p' || this.appType === 'mp-p') {
					evlPsycalDetail(this.evaluateRecordId).then(res => {
						console.log(res);
						this.handleData(res.data);
					}) 
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $app-page-bg-color;
	}
	
	.container{
		display: flex;
		flex-direction: column;
	}
	
	.item-view{
		background-color: #FFFFFF;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}
	
	.item-view-grey{
		background-color: $app-page-bg-color;
	}
	
	.ling-view{
		height: 20rpx;
	}
	
	.conclusion{
		color: #333333;
		font-size: 26rpx;
	}

</style>
